<template>
  <div class="category">
    <div style="margin-left:-8px">
    <!-- 表头 -->
      <div class="category_title" style="display:flex">
     <span class="category_title_name">分类名称:</span>

     <el-input  v-model="name" placeholder="请填写分类名称"/>

  <!-- 右边 -->
     <span class="category_title_type">分类类型:</span>

      <!-- 选择器 -->
      <el-select  v-model="type" placeholder="请选择">
       <el-option label="菜品分类"  value="1"> 菜品分类 </el-option>
       <el-option label="套餐分类"  value="2"> 套餐分类 </el-option>
     </el-select>

     <el-button @click="queryHandel" class="category_title_qury" type="info">查询</el-button>

     <el-button @click="adddishHandle"   class="category_btu_dish"  >+新增菜品分类</el-button>
     <el-button  @click="addmelHandle"  class="category_btu_meal" >+新增套餐分类</el-button>

   </div>

     <!-- 表格 -->
           <el-table
          :data="tableData" border  class="cate_table" >

          <el-table-column
            align="center"
            prop="name"
            label="分类名称"
            width="180px"
          >
          </el-table-column>

          <el-table-column align="center" label="分类类型"  prop="type" width="150px">
             <template slot-scope="scope">
           <span v-if="scope.row.type===1">菜品分类</span>
           <span v-else>套餐分类</span>
           </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="sort"
            label="排序"
            width="180px"   >

          </el-table-column>
          <el-table-column align="center" prop="stataus" label="账号状态" width="180px">
         <template slot-scope="scope">
           <span v-if="scope.row.status===1"><span class="table_status2">●</span>  启用</span>
           <span v-else><span class="table_status1">●</span> 禁用</span>
           </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="updateTime"
            label="最后操作时间"
            width="210px"
          >
          <template slot-scope="scope">
              {{scope.row.updateTime ? scope.row.updateTime.replace('T',' '):''}}
          </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="244px">
             <template slot-scope="scope">
             <div v-if="scope.row.status===1">
            <el-button style="border:none;color:rgb(64,158,255)" @click="editChandel( scope.$index)"  size="mini"  >修改</el-button >

            <el-button  style="border:none;color:rgb(245,108,108)" @click="disablehandel( scope.$index)"  size="mini">禁用</el-button>
            <el-button style="border:none;color:rgb(245,108,108)" @click="deletehandel( scope.$index)"  size="mini">删除</el-button>
           </div>

           <div v-if="scope.row.status===2">
            <el-button  style="border:none;color:rgba(43, 41, 41, 0.322)" @click="editChandel( scope.$index)"  size="mini" :disabled="true" key="f" >修改</el-button >
            <el-button style="border:none;color:orange" @click="startChandel( scope.$index)"  size="mini">启用</el-button>
           <el-button  style="border:none;color:rgba(43, 41, 41, 0.322)" @click="deletehandel( scope.$index)"  size="mini" :disabled="true" key="d" >删除</el-button>
           </div>

           </template>

          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
         <el-pagination
          background
          layout="total,sizes,prev,pager,next,jumper"
          :current-page="page"
           :page-size="pagelimit"
          :page-sizes="[5, 10]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total"
            ></el-pagination>
            </div>
            <UpdateCategoryVue :dialogVisible="dialogVisible"></UpdateCategoryVue>
              <Addcategory :dialogVisible="dialogVisible"></Addcategory>
</div>
  </div>
</template>

<script>
import { page, statusCategory, deleteCategory } from '@/api/category'
import Addcategory from './addcategorydish.vue'
import Bus from '@/utils/EventBus'
import UpdateCategoryVue from './updateCategory.vue'
export default {
  name: 'categoryIndex',
  components: {
    UpdateCategoryVue,
    Addcategory

  },
  data () {
    return {
      dialogVisible: false,
      name: '',
      type: '',
      tableData: [
        {
          id: 1,
          name: '青椒肉丝',
          type: 1,
          sort: 1,
          status: 1,
          updateTime: '2024-02-22 23:32:40'
        },
        {
          id: 2,
          name: '鱼香肉丝',
          type: 2,
          sort: 2,
          status: 2,
          updateTime: '2024-02-22 23:44:41'
        }
      ],

      /* 分页 */
      page: 1,
      pageSize: 5,
      pagelimit: 5,
      total: 0
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    async initPage () {
      // 获取分页数据
      const res = await page(this.name, this.page, this.pageSize, this.type)
      if (res.data.records === '') {
        this.$message.error('网络连接失败')
      }
      this.tableData = res.data.records
      this.total = res.data.total
      // console.log(res.data.records)
    },
    queryHandel () {
      // 查询
      this.initPage()
    },
    adddishHandle () {
      // 添加菜品
      Bus.$emit('category_dish', !this.dialogVisible)
    },

    addmelHandle () {
      // 添加套餐
      Bus.$emit('category_dish', !this.dialogVisible)
    },
    // 修改
    editChandel (index) {
      // 新增员工,打开弹窗
      const id = this.tableData[index].id
      Bus.$emit('update', !this.dialogVisible, id)
      // 修改
    },

    // 删除分类
    deletehandel (index) {
      const id = this.tableData[index].id

      this.$confirm('确认删除码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCategory(id).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，账号删除成功')
            this.initPage()
          } else {
            this.$message.error('恭喜你，账号删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    disablehandel (index) {
      // 禁用员工
      this.status(index, 2, '恭喜你，账号禁用成功', '抱歉，账号禁用失败')
    },
    startChandel (index) {
      this.status(index, 1, '恭喜你，账号启用成功', '抱歉，账号启用失败')
    },

    handleSizeChange (val) {
    // 更新当前页码展示数量

      this.pageSize = val
      this.initPage()
    },
    handleCurrentChange (val) {
    // 更新当前页码是第几页
      this.page = val
      this.initPage()
    },
    /* 封装账号开启禁用方法 */
    status (index, status, ok, err) {
      const id = this.tableData[index].id

      this.$confirm('确认修改状态码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        statusCategory(status, id).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success(ok)
            this.initPage()
          } else {
            this.$message.error(err)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
 .category{
   height: 720px;

    /* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);

  padding-right: 18px;
  padding-left: 30px;

  margin-left: 20px;
  margin-top: 20px;
 }

 .category_title{
  padding-top: 30px;

  .category_title_name{
    width: 80px;
    line-height: 40px;
  }
  .category_title_type{
    padding-left: 30px;
    width: 80px;
    line-height: 40px;
  }
.el-input{
    width: 130px;

  }
.el-select{
  width: 130px;
  padding-right: 20px;
}

  .category_title_qury{
    width: 80px;
    color: #ccc;
    background-color: black;

  }
  .category_btu_dish{
    margin-left: 276px;
    color: #ccc;
    background-color: black;
    margin-right: 10px;
  }
  .category_btu_meal{
     color: black;
    background-color: orange;
  }
}

.cate_table{
  margin-top: 40px;

}
// 分页
.pagination{
  padding-top: 10px;

}
// 表格状态禁用
.table_status1{
  color: rgba(68, 61, 61, 0.61);
}
// 表格状态启用
.table_status2{
  color: green;
}
/deep/ .el-icon.el-icon-arrow-right{
  margin-left: 5px;
}
</style>
